<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<style>
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .fab {
    position: fixed;
    right: 30px;
  }
  .fab-btn {
    position: relative;
  }
  .fab-btn .material-icons{
    font-size: 60px;
    color: rgb(95,158,160);
    transition: all 0.5s;
  }
  .fab-menu {
    display: flex;
    flex-direction:column;
    position: relative;
    text-align: center;
  }
  .fab-menu .material-icons{
    font-size: 35px;
    color: rgb(95,158,160);
    padding: 3px 0;
  }
  .fab-menu .end{
    color: red;
  }
</style>
<body>
<div class="fab">
  <div class="fab-btn">
    <a href=""><i class="material-icons" id="one">account_circle</i></a>
  </div>
  <div class="fab-menu" style="display: none">
    <a href=""><i class="material-icons" id="two">create</i></a>
    <a href=""><i class="material-icons" id="there">alarm_add</i></a>
    <a href=""><i class="material-icons end" id="four">sentiment_very_satisfied</i></a>
  </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(function () {
    $(".fab").mouseenter(function () {
      $("#one").text("remove_circle").animate({"rotate":"180deg","font-size":"80px"},200);
      $(".fab-menu").fadeIn(300);
    }).mouseleave(function () {
      $("#one").text("account_circle").animate({"rotate":"0deg","font-size":"60px"},200);
      $(".fab-menu").fadeOut(300);
    })
  })
</script>
</body>
</html>